<template>
  <div class="playlist-container">
    <div class="top-wrap">
      <div class="img-wrap">
        <img :src="playlist.coverImgUrl" alt="" />
      </div>
      <div class="info-wrap">
        <p class="title">{{playlist.name}}</p>
        <div class="author-wrap" v-if="playlist.creator || playlist.createTime">
          <img class="avatar" :src="playlist.creator.avatarUrl" alt="" />
          <span class="name">{{playlist.creator.nickname}}</span>
          <span class="time">{{this.playlist.createTime}} 创建</span>
        </div>
        <div class="play-wrap" @click="circlePlay()">
          <span class="iconfont icon-circle-play"></span>
          <!-- <span class="text">播放全部</span> -->
          <span class="text">播放</span>
        </div>
        <div class="tag-wrap">
          <span class="title">标签:</span>
          <ul v-if="playlist.tags && playlist.tags.length != 0">
            <li v-for="(item,index) in playlist.tags" :key="index">{{item}}</li>
          </ul>
          <span v-else>暂无</span>
        </div>
        <div class="desc-wrap">
          <span class="title">简介:</span>
          <span class="desc" v-if="playlist.description">{{playlist.description}}</span>
          <span class="desc" v-else>暂无</span>
        </div>
      </div>
    </div>
    <el-tabs v-model="activeIndex">
      <el-tab-pane label="歌曲列表" name="1">
        <table class="el-table playlit-table">
          <thead>
            <th></th>
            <th></th>
            <th>音乐标题</th>
            <th>歌手</th>
            <th>专辑</th>
            <th>时长</th>
          </thead>
          <tbody>
            <tr 
            class="el-table__row" 
            v-for="(item,index) in list" 
            :key="index"
            @click="playMusic(item.id)"
            >
              <td>{{index + 1}}</td>
              <td>
                <div class="img-wrap">
                  <img :src="item.al.picUrl" alt="" />
                  <span class="iconfont icon-play"></span>
                </div>
              </td>
              <td>
                <div class="song-wrap">
                  <div class="name-wrap">
                    <span>{{item.name}}</span>
                    <span v-if="item.mv!=0" class="iconfont icon-mv"></span>
                  </div>
                  <span v-if="item.alia.length!=0">{{item.alia[0]}}</span>
                </div>
              </td>
              <td>{{item.ar[0].name}}</td>
              <td>{{item.al.name}}</td>
              <td>{{item.dt}}</td>
            </tr>
          </tbody>
        </table>
      </el-tab-pane>
      <el-tab-pane label="评论" name="2">
        <!-- 精彩评论 -->
        <div class="comment-wrap" v-if="hotComments && hotComments.length != 0">
          <p class="title">精彩评论<span class="number">({{hotComments.length}})</span></p>
          <div class="comments-wrap">
            <div class="item" v-for="(item,index) in hotComments" :key="index">
              <div class="icon-wrap">
                <img :src="item.user.avatarUrl" alt="" />
              </div>
              <div class="content-wrap">
                <div class="content">
                  <span class="name">{{item.user.nickname}}：</span>
                  <span class="comment">{{item.content}}</span>
                </div>
                <div 
                 class="re-content" 
                 v-if="item.beReplied && item.beReplied.length != 0"
                 v-for="(i,index) in item.beReplied" 
                 :key="index"
                 >
                  <span class="name">{{i.user.nickname}}：</span>
                  <span class="comment">{{i.content}}</span>
                </div>
                <div class="date">{{item.time}}</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 最新评论 -->
        <div class="comment-wrap" v-if="comments && comments.length != 0">
          <p class="title">最新评论<span class="number">({{total}})</span></p>
          <div class="comments-wrap">
            <div class="item" v-for="(item,index) in comments" :key="index">
              <div class="icon-wrap">
                <img :src="item.user.avatarUrl" alt="" />
              </div>
              <div class="content-wrap">
                <div class="content">
                  <span class="name">{{item.user.nickname}}：</span>
                  <span class="comment">{{item.content}}</span>
                </div>
                <div 
                 class="re-content" 
                 v-if="item.beReplied && item.beReplied.length != 0"
                 v-for="(i,index) in item.beReplied" 
                 :key="index"
                 >
                  <span class="name">{{i.user.nickname}}：</span>
                  <span class="comment">{{i.content}}</span>
                </div>
                <div class="date">{{item.time}}</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 分页器 -->
        <el-pagination
          @current-change="handleCurrentChange"
          background
          layout="prev, pager, next"
          :total="total"
          :current-page="page"
          :page-size="limit"
        >
        </el-pagination>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import getDetail from '../utils/playlist'
export default {
  name: 'playlist',
  data() {
    return {
      activeIndex: '1',
      // 总条数
      total: 0,
      // 页码
      page: 1,
      limit:12,
      playlist:{},
      comments:[],
      hotComments:[],
      list:[],
      idArr:[],
    };
  },
  watch:{
    activeIndex(){
      if(this.activeIndex == '2'){
        this.getcomments();
      } else if(this.activeIndex == '1'){
        this.getsongs();
      }
    }
  },
  created() {
      this.getsongs();
      this.getcomments();
  },
  methods: {
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      this.getcomments();
    },
    getcomments(){
        getDetail.getComment(this.$route.query.q,this.limit,(this.page-1)*this.limit)
        .then(res => {
            this.total = res.data.total;
            this.comments = res.data.comments;
            this.comments.forEach(x => {
              x.time = this.format(x.time);
            })
            if(res.data.hotComments){
              this.hotComments = res.data.hotComments;
              this.hotComments.forEach(x => {
                x.time = this.format(x.time);
              })
            }
        })
    },
    getsongs(){
        getDetail.playListDetail(this.$route.query.q)
        .then(res => {
        this.playlist = res.data.playlist;
        this.list = this.playlist.tracks;
        this.list.forEach(x => {
            x.dt = this.formatTime(x.dt);
            this.idArr.push(x.id);
        })
        this.playlist.createTime = this.format(this.playlist.createTime);
        })
    },
    format(Time){
      var time = new Date(parseInt(Time));
      var y = time.getFullYear();
      var m = time.getMonth()+1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      if(m<10) m = '0' + m;
      if(d<10) d = '0' + d;
      if(h<10) h = '0' + h;
      if(mm<10) mm = '0' + mm;
      if(s<10) s = '0' + s;
      return y + '-' + m + '-' + d + ' ' + h + ':' + mm + ':' + s;
    },
    formatTime(time) {
      let min = parseInt(time/1000/60);
      let sec = parseInt(time/1000%60);
      if(min < 10) {
        min = '0' + min;
      } 
      if(sec < 10) {
        sec = '0' + sec;
      }
      return (min + ':' + sec);
    },
    playMusic(id){
      getDetail.play(id).then(res => {
        // console.log(res.data.data[0].url);
        this.$parent.musicUrl = res.data.data[0].url;
      })
    },
    circlePlay(){
      this.playMusic(this.idArr[0]);
    }
  }
}
</script>

<style >

</style>
